<!--
 * Description: 报价系列新增页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/05/18 17:07
-->

<template>
  <div class="wrap">
    <div v-if="formData.length >= 1">
      <!--数据表单-->
      <el-form size="mini">
        <table class="table">
          <tr>
            <td>{{ $t('FdData.pictureId') }}</td>
            <td>{{ $t('FdData.pictureName') }}</td>
          </tr>
          <tr v-for="(item, index) in formData" :key="index">
            <td>
              <!--pictureId-->
              <el-form-item>
                <el-input v-model="item.pictureId" v-blur:pictureId="formData" clearable />
              </el-form-item>
            </td>
            <td>
              <!--pictureName-->
              <el-form-item>
                <el-input v-model="item.pictureName" v-blur:pictureName="formData" clearable />
              </el-form-item>
            </td>
          </tr>
        </table>
      </el-form>

      <span style="display: block; text-align: center; margin-top: 5px">
        <!--取消按钮-->
        <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
        <!--保存按钮-->
        <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
          {{ $t('button.save') }}
        </el-button>
      </span>
    </div>
    <p v-else class="null">暂无数据</p>
  </div>
</template>

<script>
import { fdRowPictureEdit, fdRowPictureList } from '@/api/quote/fd-row-picture'

export default {
  name: 'FdDataAdd',
  props: {
    fdRowId: {
      default: () => null,
      type: String
    },
    isNew: {
      default: () => null,
      type: Boolean
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      formData: []
    }
  },
  mounted() {
    this.pageDataInit()
  },
  methods: {
    async pageDataInit() {
      try {
        this.isRequesting = true
        const res = await fdRowPictureList({
          fdRowId: this.fdRowId,
          isNew: this.isNew
        })
        if (res.data.length) {
          this.formData = res.data
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    async save() {
      try {
        this.isRequesting = true
        await fdRowPictureEdit(this.formData, { msgSuccess: true, msgError: true })
        this.$emit('cancel')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss" scoped>
.table {
  border-collapse: collapse;
  margin: 0 auto;
  td {
    text-align: center;
  }
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.null {
  text-align: center;
  color: #ccc;
}
</style>
